<script setup lang="ts" name="BpmnProcessAddEdit">
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { t } = useI18n() // 国际化
const { getDictionaryEntryData } = useDictionaryEntry()
const statusList: any = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref({
  name: '',
  type: '',
  status: true,
  sort: 0,
  remark: ''
})
// 显示新建/编辑模块表单抽屉弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    dialogTitle.value = '编辑流程'
    formData.value.name = v.name
    formData.value.type = v.type
    formData.value.status = v.status
    formData.value.sort = v.sort
    formData.value.remark = v.remark
  } else {
    dialogTitle.value = '新增流程'
    formData.value.name = ''
    formData.value.type = ''
    formData.value.status = true
    formData.value.sort = 0
    formData.value.remark = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}

const getStatusList = async () => {
  console.log('获取状态数据')
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_boolean'
  })
}
getStatusList()
</script>

<template>
  <el-dialog v-model="dialogVisible" width="600px" append-to-body :title="dialogTitle">
    <el-form label-width="auto" label-position="right">
      <ElFormItem label="流程名称">
        <el-input v-model="formData.name" placeholder="请输入名称" />
      </ElFormItem>
      <ElFormItem label="流程分类">
        <el-input v-model="formData.type" placeholder="请输入分类" />
      </ElFormItem>
      <ElFormItem label="状态">
        <el-radio-group v-model="formData.status" class="radio-button">
          <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value" border>{{ item.label
          }}</el-radio>
        </el-radio-group>
      </ElFormItem>
      <ElFormItem label="排序">
        <el-input-number v-model="formData.sort" :min="0" />
      </ElFormItem>
      <ElFormItem label="备注">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
      </ElFormItem>
    </el-form>
    <template #footer>
      <span ref="modalFooter" class="modal-footer">
        <el-button @click="handleCloseDialog">{{ t('action', 'cancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ t('action', 'confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item__content) {
    .el-radio-group {
      margin: 0;
    }
  }
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
